<template>
  <!--一整行-->
  <el-row :gutter="100" style="padding: 10px 20px">
    <el-col :span="4">
      <draggable
        :group="{ name: 'skyMain', pull: 'clone', put: false }"
        @end="handleEnd"
      >
        <!-- 容器拖拽结束，给容器新命名组 -->
        <draggable>容器</draggable>
      </draggable>
    </el-col>
    <el-col :span="20">
      <el-col :span="24" style="width: 100%;height: 100%">
        <draggable
          :group="{ name: 'skyMain' }"
        >
          <s-draggable v-bind="item" :key="index"
                       v-for="(item, index) in containerList"></s-draggable>
        </draggable>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import draggable from 'vuedraggable';
import SDraggable from "@/components/component/s-draggable";

export default {
  name: "Index",
  components: {
    draggable,
    SDraggable,
  },
  data() {
    return {
      // 容器list， 每一个容器都是独立存在的
      containerList: [
        {
          name: this.generateUUID(), // 指定组名
          put: false, // 禁止拖入
          // 组件数组
          draggableList: [
            {
              // 占用几列
              span: 5,
              width: '100%',
              height: '100%',
              // 拖拽分组
              groupName: 'main' + this.generateUUID(), // 这里可以定制化
              // 组件
              components: [
                {
                  is: 's-input',
                  // 组件属性
                  props: {
                    _id: this.generateUUID(),
                    title: '添加',
                    attr: 'input',
                    type: 'input',
                    triggerOnFocus: true,
                    disabled: false,
                    precision: 2,
                    restUrl: '123',
                    style: {
                      width: '100%'
                    }
                  }
                }
              ]
            },
          ]
        },
        {
          name: this.generateUUID(), // 指定组名
          put: false, // 禁止拖入
          draggableList: [
            {
              span: 5,
              width: '100%',
              height: '100%',
              groupName: this.generateUUID(), // 这里可以定制化
              components: [
                {
                  is: 's-input',
                  props: {
                    _id: this.generateUUID(),
                    title: '添加',
                    attr: 'input',
                    type: 'input',
                    triggerOnFocus: true,
                    disabled: false,
                    precision: 2,
                    restUrl: '123',
                    style: {
                      width: '100%'
                    }
                  }
                },
                {
                  is: 's-input',
                  props: {
                    _id: this.generateUUID(),
                    title: '添加',
                    attr: 'input',
                    type: 'input',
                    triggerOnFocus: true,
                    disabled: false,
                    precision: 2,
                    restUrl: '123',
                    style: {
                      width: '100%'
                    }
                  }
                },
              ]
            },
          ]
        }
      ],
    }
  },
  methods: {
    handleEnd(item) {

    },
    handleChange(e) {
      console.log("e=======>\n" + e)
    },
    generateUUID() {
      let d = new Date().getTime(); // 当前时间戳
      let d2 = (performance && performance.now && (performance.now() * 1000)) || 0; // 高精度时间戳
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = Math.random() * 16; // 随机数
        if (d > 0) {
          r = (d + r) % 16 | 0;
          d = Math.floor(d / 16);
        } else {
          r = (d2 + r) % 16 | 0;
          d2 = Math.floor(d2 / 16);
        }
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); // 按照UUID规范生成
      });
    }
  }
}
</script>

<style scoped>
.com {

}

.com:hover {
  cursor: move;
  z-index: 1;
  outline: 1px dashed #2ec79c !important;
}

/*.com:hover .active {*/
/*  z-index: 9;*/
/*  outline: 2px solid #2ec79c !important;*/
/*}*/
</style>
